<template>
  <div class="dashboard-editor-container">
    <!-- <github-corner class="github-corner"  margin-top:12px;  /> -->

    <el-row style="width: 86.3%; top: 6px; z-index: 999; position: fixed">
      <el-col :span="5" class="card-box">
        <!-- <i class="el-icon-s-data" /><span style="font-weight:600;color:#666;margin-right: 450px;margin-left: 5px;">
          销售总览
        </span> -->
        <el-cascader
          class="region"
          v-model="queryParams.salesGrade"
          placeholder="选择店铺分组"
          :options="cascadeList"
          :props="{ checkStrictly: true }"
          @change="handleChange"
          style="width: 300px; height: 30px"
        >
        </el-cascader>
      </el-col>
      <el-col :span="12" style="background-color: #f5f5f5; height: 30px">
        <nav id="navbar">
          <!-- <ul>
            <li :class="{ active: isActiveSection(1) }">
              <a href="#section1" @click="scrollToSection(1)">销售总览</a>
            </li>
            <li :class="{ active: isActiveSection(2) }">
              <a href="#section2" @click="scrollToSection(2)">渠道排行</a>
            </li>
            <li :class="{ active: isActiveSection(3) }">
              <a href="#section3" @click="scrollToSection(3)">店铺排行</a>
            </li>
            <li :class="{ active: isActiveSection(4) }">
              <a href="#section4" @click="scrollToSection(4)">库存分析</a>
            </li>
            <li :class="{ active: isActiveSection(5) }">
              <a href="#section5" @click="scrollToSection(5)">地区排行</a>
            </li>
          </ul> -->
        </nav>
      </el-col>
      <el-col :span="7">
        <date
          v-model="valueTime"
          :type.sync="groupType"
          @handleChangeTime="handleChangeTime($event)"
        ></date>
      </el-col>
      <!-- <timeSearch @getDateArr="getDateArr" @changDay="changDay" :timeArr="timeArr" :dayActive="this.dayActive"
        :dayLimit="1095" /> -->
    </el-row>

    <!-- <section id="section1">
      <el-row
        style="background: #fff; padding: 20px 16px 0; margin-bottom: 32px"
      >
        <h4
          style="
            font-weight: 500;
            color: #666;
            margin-left: 5px;
            margin-top: 25px;
          "
        >
          <i class="el-icon-s-data" style="margin-right: 5px" />销售总览
        </h4>
        <panel-group
          @handleSetLineChartData="handleSetLineChartData"
          :biNumberOfItem="this.biNumberOfItem"
          :biNumberItem="this.biNumberItem"
        />
      </el-row>
      
      <el-row
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >
        <chartData :chart-data="echartData" />
      </el-row>
    </section> -->
    <section>
      <el-card>
        <!-- <div> -->
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="" prop="firstLevelColumn">
            <el-select
              v-model="queryParams.firstLevelColumn"
              placeholder="请选择一级类目"
              clearable
              multiple
              style="width: 130px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_pl"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="secondLevelColumn">
            <!-- <el-input v-model="queryParams.secondLevelColumn" placeholder="请输入三级类目" clearable
          @keyup.enter.native="handleQuery" /> -->
            <el-select
              v-model="queryParams.secondLevelColumn"
              placeholder="请选择三级类目"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_cycle"
                :key="dict.label"
                :label="dict.label"
                :value="dict.label"
              />
            </el-select>
          </el-form-item>

          <!-- <el-form-item label="" prop="designFabricName">
            
            <el-select
              v-model="queryParams.designFabricName"
              clearable
              multiple
              filterable
              placeholder="主面料名称"
              @keyup.enter.native="handleQuery"
            >
              <el-option
                v-for="(item, index) in mianliao"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="operationLevel">
            <el-select
              v-model="queryParams.operationLevel"
              placeholder="请选择运营-层级"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item> -->

          <el-form-item>
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              >导出</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
          <!-- <br /> -->
          <el-form-item label="" prop="newProStartTime">
            <timeSearch
              @getDateArr="getDateArr"
              @changDay="changDay"
              :timeArr="timeArr"
              :dayActive="this.dayActive"
              :dayLimit="1095"
            />
          </el-form-item>
          <el-form-item label="" prop="newProStartTime">
            <dayTime
              @getDateArr="getDateArrTime"
              @changDay="changDayTime"
              :timeArr="timeArrTime"
              :dayActive="this.dayActiveTime"
              :dayLimit="1095"
            />
          </el-form-item>
          <el-form-item label="" prop="newProStartTime">
            <exhaustionDay
              @getDateArr="getDateArrRate"
              @changDay="changDayRate"
              :timeArr="timeArrRate"
              :dayActive="this.dayActiveRate"
              :dayLimit="1095"
            />
          </el-form-item>
          <br />
          <el-form-item label="" prop="productSeason">
            <!-- <el-input v-model="form.productSeason" placeholder="请输入商品-季节" /> -->
            <el-select
              v-model="queryParams.productSeason"
              placeholder="请选择商品-季节"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_jijie"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="designFabricName">
            <!-- <el-input v-model="queryParams.designFabricName" placeholder="请输入面料名称" clearable
           /> -->
            <el-select
              v-model="queryParams.designFabricName"
              clearable
              multiple
              filterable
              placeholder="主面料名称"
              @keyup.enter.native="handleQuery"
            >
              <el-option
                v-for="(item, index) in mianliao"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="operationLevel">
            <el-select
              v-model="queryParams.operationLevel"
              placeholder="请选择运营-层级"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="operationMainProducts">
            <el-input
              v-model="queryParams.operationMainProducts"
              placeholder="商品-主推款"
              clearable
              @keyup.enter.native="handleQuery"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="" prop="isNewList">
            <el-select
              v-model="queryParams.isNewList"
              placeholder="新老品"
              clearable
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_sale_view"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
            <!-- <el-radio-group
              v-model="queryParams.isNewList"
              size="small"
              @change="changeTheme"
              fill="#66b1ff"
            >
              <el-radio :label="null">所有状态</el-radio>
              <el-radio :label="'new'">新品</el-radio>
              <el-radio :label="'old'">老品</el-radio>
            </el-radio-group> -->
          </el-form-item>
        </el-form>
        <!-- </div> -->
      </el-card>
    </section>

    <section id="section1">
      <!-- margin-bottom: 32px  -->
      <el-row :gutter="10" style="padding: 16px 0">
        <el-col :span="24">
          <!-- style="height: calc(100vh - 500px)" -->
          <el-card>
            <div
              slot="header"
              style="display: flex; justify-content: space-between"
            >
              <span><i class="el-icon-collection"></i> 商品排行榜</span>
              <el-select
                v-model="queryParams.itemType"
                placeholder="产品视角"
                clearable
                @change="changeView"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_view.slice(2, 6)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select>
            </div>
            <!-- :height="pageHeight" -->
            <div ref="tableDom">
              <el-table
                :maxHeight="ItemDateList.length ? tableHeight : 'auto'"
                :data="ItemDateList"
                highlight-current-row
                style="width: 100%"
                ref="table"
                @cell-click="tableEdit"
              >
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column
                  width="60"
                  label="排名"
                  type="index"
                ></el-table-column>
                <el-table-column
                  width="60"
                  label="产品图"
                  align="center"
                  prop="picUrl"
                  ><template slot-scope="scope">
                    <el-popover
                      effect="light"
                      trigger="click"
                      placement="left"
                      width="auto"
                      v-show="scope.row.picUrl"
                    >
                      <template #default>
                        <img
                          :src="pjtUrl + scope.row.picUrl"
                          style="
                            width: 800px;
                            height: 600px;
                            object-fit: contain;
                          "
                        />
                      </template>
                      <template #reference>
                        <img
                          :src="pjtUrl + scope.row.picUrl"
                          style="width: 40px; height: 40px; object-fit: contain"
                        />
                      </template>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column
                  width="140"
                  label="颗粒度"
                  align="center"
                  prop="itemGrade"
                >
                  <template slot-scope="scope">
                    <div
                      v-if="queryParams.itemType == 'item'"
                      style="
                        color: rgb(37, 137, 255);
                        cursor: pointer;
                        text-decoration: underline;
                      "
                      @click="gotoSku(scope.row)"
                    >
                      {{ scope.row.itemGrade }}
                    </div>
                    <span v-else>{{ scope.row.itemGrade }}</span>
                    <!-- <el-button size="mini" @click="gotoApply(scope.row)">
              样衣记录
            </el-button> -->
                  </template>
                </el-table-column>
                <el-table-column
                  width="100"
                  label="销售金额"
                  align="center"
                  prop="salesAmount"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.salesAmount }}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  width="160"
                  label="销售趋势"
                  align="center"
                  prop="name"
                >
                  <template slot-scope="scope">
                    <div
                      style="height: 20px; width: 150px"
                      :ref="'echarts' + scope.row.itemGrade"
                    ></div>
                  </template>
                </el-table-column>

                <el-table-column
                  width="100"
                  label="退款金额"
                  align="center"
                  prop="returnAmount"
                />
                <el-table-column
                  width="100"
                  label="净销售额"
                  align="center"
                  prop="netSalesAmount"
                ></el-table-column>

                <el-table-column
                  width="100"
                  label="综合退货率"
                  align="center"
                  prop="comprehensiveReturnRate"
                >
                  <template slot-scope="scope">
                    <div>
                      {{
                        (scope.row.comprehensiveReturnRate * 100).toFixed(2)
                      }}%
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  width="100"
                  label="总销售件数"
                  align="center"
                  prop="totalSalesNumber"
                ></el-table-column>

                <el-table-column
                  width="100"
                  label="净销售件数"
                  align="center"
                  prop="netSalesNumber"
                />
                <el-table-column
                  width="100"
                  label="毛利额"
                  align="center"
                  prop="grossProfit"
                />
                <el-table-column
                  width="100"
                  label="毛利率"
                  align="center"
                  prop="grossProfitRate"
                >
                  <template slot-scope="scope">
                    <div>
                      {{ (scope.row.grossProfitRate * 100).toFixed(2) }}%
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  width="100"
                  label="发货前退货数"
                  align="center"
                  prop="returnBeforeShipmentNumber"
                />

                <el-table-column
                  width="100"
                  label="发货后退货数"
                  align="center"
                  prop="returnAfterShipmentNumber"
                />
                <el-table-column
                  width="100"
                  label="总退货件数"
                  align="center"
                  prop="totalReturnNumber"
                />
                <el-table-column
                  width="100"
                  label="库存"
                  align="center"
                  prop="endingInventory"
                />
                <el-table-column
                  width="100"
                  label="采购在途"
                  align="center"
                  prop="salesGrossProfit"
                />
                <el-table-column
                  width="100"
                  label="SD单件数"
                  align="center"
                  prop="sdNumber"
                />
                <el-table-column
                  width="100"
                  label="MJX单件数"
                  align="center"
                  prop="mjxNumber"
                />
                <el-table-column
                  width="100"
                  label="可售天数"
                  align="center"
                  prop="saleDays"
                />
                <el-table-column
                  width="100"
                  label="上新时间"
                  align="center"
                  prop="newTime"
                />
                <el-table-column
                  width="100"
                  label="是否新品"
                  align="center"
                  prop="isNew"
                />
                <el-table-column
                  width="100"
                  label="售罄率"
                  align="center"
                  prop="exhaustionRate"
                >
                  <template slot-scope="scope">
                    <div>
                      {{ (scope.row.exhaustionRate * 100).toFixed(2) }}%
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  width="100"
                  label="商品折扣率"
                  align="center"
                  prop="discountRateGoods"
                >
                  <template slot-scope="scope">
                    <div>{{ scope.row.discountRateGoods.toFixed(2) }}%</div>
                  </template>
                </el-table-column>
                <!-- <template slot-scope="scope">
                  <div>{{ scope.row.exhaustionRate.toFixed(2) }}</div>
                </template> -->

                <!-- <el-table-column width="100"
                label="平均折扣率"
                align="center"
                prop="averageDiscountRateGoods"
              >
                <template slot-scope="scope">
                  <div>
                    {{ (scope.row.averageDiscountRateGoods * 100).toFixed(2) }}%
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="100"
                label="销售占比"
                align="center"
                prop="amountRatio"
              >
                <template slot-scope="scope">
                  <div>{{ (scope.row.amountRatio * 100).toFixed(2) }}%</div>
                </template>
              </el-table-column>-->
              </el-table>
            </div>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getselectItemDateList(queryParams)"
            />
          </el-card>
        </el-col>
        <!-- <el-col :span="5">
          <el-card>
            <div slot="header">
              <span><i class="el-icon-pie-chart"></i> 渠道排行分析</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div ref="usedmemory" style="height: 380px" />
            </div>
          </el-card>
        </el-col> -->
      </el-row>
    </section>

    <section id="section2">
      <el-row
        style="background: #fff; padding: 0px 16px 0; margin-bottom: 32px"
      >
        <h4
          style="
            font-weight: 500;
            color: #666;
            margin-left: 5px;
            margin-top: 25px;
            display: flex;
            justify-content: space-between;
          "
        >
          <span
            ><i
              class="el-icon-s-data"
              style="margin-right: 5px"
            />趋势分析</span
          >
          <!-- <el-select v-model="productView" placeholder="分析指标" clearable>
            <el-option
              v-for="dict in dict.type.sys_product_view"
              :key="dict.value"
              :label="dict.label"
              :value="dict.label"
            />
          </el-select> -->
        </h4>
        <!-- <panel-group
          @handleSetLineChartData="handleSetLineChartData"
          :biNumberOfItem="this.biNumberOfItem"
          :biNumberItem="this.biNumberItem"
        /> 
      </el-row>

      <el-row
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >-->
        <chartData :chart-data="echartData" />
      </el-row>
    </section>

    <!-- <section id="section3">
      <el-row :gutter="10" style="padding: 32px 0; margin-bottom: 32px">
        <el-col :span="17">
          <el-card style="height: calc(100vh - 380px)">
            <div slot="header">
              <span><i class="el-icon-collection"></i> 店铺排行榜</span>
            </div>
            <el-table
              :data="shopSaleTopList"
              :height="pageHeight"
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column
                label="排名"
                width="60"
                type="index"
              ></el-table-column>

              <el-table-column
                width="100"
                label="店铺"
                align="center"
                prop="shop"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                width="100"
                label="销售金额"
                align="center"
                prop="salesAmount"
              ></el-table-column>

              <el-table-column
                width="100"
                label="退款金额"
                align="center"
                prop="returnAmount"
              />
              <el-table-column
                width="100"
                label="净销售额"
                align="center"
                prop="netSalesAmount"
              ></el-table-column>

              <el-table-column
                width="100"
                label="综合退货率"
                align="center"
                prop="comprehensiveReturnRate"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.comprehensiveReturnRate.toFixed(2) }}%</div>
                </template>
              </el-table-column>

              <el-table-column
                width="100"
                label="订单总数"
                align="center"
                prop="totalOrdersNumber"
              ></el-table-column>

              <el-table-column
                width="100"
                label="销售件数"
                align="center"
                prop="totalSoldNumber"
              />
              <el-table-column
                width="100"
                label="销售毛利额"
                align="center"
                prop="salesGrossProfit"
              />
              <el-table-column
                width="100"
                label="客单价"
                align="center"
                prop="customerUnitPrice"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.customerUnitPrice.toFixed(2) }}</div>
                </template>
              </el-table-column>

              <el-table-column
                width="100"
                label="平均折扣率"
                align="center"
                prop="averageDiscountRateGoods"
              >
                <template slot-scope="scope">
                  <div>
                    {{ (scope.row.averageDiscountRateGoods * 100).toFixed(2) }}%
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                width="100"
                label="销售占比"
                align="center"
                prop="amountRatio"
              >
                <template slot-scope="scope">
                  <div>{{ (scope.row.amountRatio * 100).toFixed(2) }}%</div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card>
            <div slot="header">
              <span><i class="el-icon-pie-chart"></i> 店铺排行分析</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div ref="commandstats" style="height: 500px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <section id="section4">
      <el-row
        style="background: #fff; padding: 20px 16px 0; margin-bottom: 32px"
      >
        <h4
          style="
            font-weight: 500;
            color: #666;
            margin-left: 5px;
            margin-top: 25px;
          "
        >
          <i class="el-icon-s-data" style="margin-right: 5px" />库存分析
        </h4>
        <panel-group-i
          @handleSetLineSkuData="handleSetLineSkuData"
          :biNumberOfItem="this.biNumberOfItem"
          :biNumberSku="this.biNumberSku"
        />
      </el-row>
      
      <el-row
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >
        <chartDataI :echartDataSku="echartDataSku" />
      </el-row>
    </section>

    <section id="section5">
      <el-row :gutter="10">
        <el-col :span="10">
          <el-card style="height: calc(100vh - 125px)">
            <div slot="header">
              <span><i class="el-icon-collection"></i> 销售地区Top20</span>
              
            </div>
            <el-table
              :data="TopSallist"
              :height="tableHeight"
              highlight-current-row
              style="width: 100%"
            >
              
              <el-table-column
                label="排名"
                width="60"
                type="index"
              ></el-table-column>

              <el-table-column
                width="100"
                label="省份"
                align="center"
                prop="province"
              ></el-table-column>

              <el-table-column
                width="100"
                label="城市"
                align="center"
                prop="city"
              />
              <el-table-column
                width="100"
                label="订单数"
                align="center"
                prop="orderCount"
              ></el-table-column>

              <el-table-column
                width="100"
                label="销售金额"
                align="center"
                prop="salesAmount"
              />

              <el-table-column
                width="100"
                label="销售占比"
                align="center"
                prop="amountRatio"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.amountRatio.toFixed(2) }}%</div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>

        <el-col :span="14">
          <el-card style="height: calc(100vh - 125px)"> </el-card>
        </el-col>
      </el-row>
    </section> -->
  </div>
</template>

<script>
import { getCache } from "@/api/monitor/cache";
import * as echarts from "echarts";
import date from "./day/date.vue";
import day from "./day/day.vue";
import exhaustionDay from "./day/exhaustionDay.vue";
import chartDataI from "./components/chartDataI";
import chartData from "./components/chartData";
import timeSearch from "./day/day.vue";
import dayTime from "./day/dayTime.vue";
// import GithubCorner from '@/components/GithubCorner'
import PanelGroup from "./components/PanelGroup";
import PanelGroupI from "./components/PanelGroupI";
// import LineChart from './components/LineChart'

// import RaddarChart from './components/RaddarChart'
// import PieChart from './components/PieChart'
// import BarChart from './components/BarChart'
import {
  listBiSkuSaleDwd,
  getBiSkuSaleDwd,
  delBiSkuSaleDwd,
  addBiSkuSaleDwd,
  updateBiSkuSaleDwd,
  selectItemDateList,
  selectItemStatistics,
} from "@/api/sku/BiSkuSaleDwd";
import {
  listBiShopSaleDwd,
  getBiShopSaleDwd,
  delBiShopSaleDwd,
  addBiShopSaleDwd,
  updateBiShopSaleDwd,
  selectShopStatic,
} from "@/api/chart/BiShopSaleDwd";
import {
  listAll,
  getBrandChannelShop,
  delBrandChannelShop,
  addBrandChannelShop,
  updateBrandChannelShop,
} from "@/api/chart/brandChannelShop";
import {
  listFabric,
  getFabric,
  delFabric,
  addFabric,
  updateFabric,
  selectFabricNameList,
  synProDesignFabricByIds,
  queryContentByKey,
} from "@/api/data/Fabric";
// import TransactionTable from './components/TransactionTable'
// import TodoList from './components/TodoList'
// import BoxCard from './components/BoxCard'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
};

export default {
  name: "Admin",
  dicts: [
    "sys_product_view",
    "sys_product_qudao",
    "sys_product_size",
    "sys_product_design",
    "sys_product_scene",
    "sys_product_coder",
    "sys_product_yf",
    "sys_product_cycle",
    "sys_product_pl",
    "sys_product_jijie",
    "sys_product_level",
    "sys_sale_view",
  ],
  components: {
    // GithubCorner,
    PanelGroup,
    PanelGroupI,
    // LineChart,

    // RaddarChart,
    // PieChart,
    // BarChart,

    chartData,
    chartDataI,
    // TransactionTable,
    // TodoList,
    // BoxCard
    timeSearch,
    dayTime,
    date,
    day,
    exhaustionDay,
  },
  data() {
    return {
      dayActiveRate: 2,
      timeArrRate: [
        // { value: "1", label: "今天" },
        { value: "2", label: "售罄时间定义" },
        // { value: "7", label: "最近7天" },
        // { value: "30", label: "最近30天" },
      ],
      timeGapRate: { startSellOutDate: "", endSellOutDate: "" },
      //新品时间
      value1: "",
      timeObj: {},
      //滚动条
      Nowscroll: "",
      scrollLeft: "",
      //面料名称
      mianliao: [],
      //纵向滚动条
      tableHeight: "",
      // 总条数
      total: 0,
      // 查询参数
      // queryParams: {
      //   pageNum: 1,
      //   pageSize: 10,
      // },
      //商品排行
      ItemDateList: [],
      //产品视角
      productView: "item",
      //店铺SaleTop
      shopSaleTopList: [],
      //渠道SaleTop
      channelSaleTopList: [],
      // 统计店铺信息
      commandstats: null,
      //统计渠道信息
      usedmemory: null,
      //锚点
      sections: document.querySelectorAll("section"),
      activeSection: null,
      active: null,
      scrollTimer: null,
      //地区前20
      TopSallist: [],
      tableHeight: window.innerHeight - 175,
      pageHeight: window.innerHeight - 280,
      //BI指标数据
      biNumberItem: [],
      biNumberSku: [],
      //时间控件
      timeObj: {},
      //客单价
      biNumberOfItem: "",

      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      // valueTime: "",
      groupType: "date",

      highlighted: ["销售金额", "退款金额", "净销售额"], // 初始化时，前两个元素高亮

      //传递数据
      echartData: {
        columns: ["支付日期", "销售金额", "退款金额", "净销售额"],
        rows: [],
      },
      highlightedSku: ["库存周转率"], // 初始化时，前两个元素高亮

      //Sku传递数据
      echartDataSku: {
        columns: ["支付日期", "库存周转率"],
        rows: [],
      },
      //时间
      //
      dayActive: 90,
      timeArr: [
        // { value: "2", label: "昨天" },
        // { value: "7", label: "最近7天" },
        // { value: "30", label: "日" },
        // { value: "56", label: "周" },
        // { value: "365", label: "月" },
        // { value: "1", label: "自定义" },
        { value: "90", label: "新品时间" },
      ],
      timeGap: { startTime: "", endTime: "" },
      dayActiveTime: 30,
      timeArrTime: [
        // { value: "2", label: "昨天" },
        // { value: "7", label: "最近7天" },
        { value: "30", label: "销售时间段" },
        // { value: "56", label: "周" },
        // { value: "365", label: "月" },
        // { value: "1", label: "自定义" },
        // { value: "90", label: "新品时间" },
      ],
      timeGapTime: { startTime: "", endTime: "" },
      // 店铺
      cascadeList: [],
      //, "天猫", "vfu运动旗舰店"
      value: ["VFU"],
      loading: false,
      //店铺名称
      shopName: "",
      pjtUrl: process.env.VUE_APP_BASE_API,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // productNo: null,
        // manufacturerCode: null,
        // salePrice: null,
        // tagPrice: null,
        firstLevelColumn: null,
        secondLevelColumn: null,
        // logoPosition: null,
        // purchasingReportAttachments: null,
        designFabricNameList: null,
        productSeason: null,
        operationMainProducts: null,
        operationLevel: null,

        itemType: "item",
        salesGrade: ["VFU"],
        endTime: null,
        startTime: null,
        dateType: null,
        isNewList: null,
        newProStartTime: null,
        newProEndTime: null,
        startSellOutDate: null,
        endSellOutDate: null,
        startSaleDays: "2023-12-28",
        endSaleDays: "2023-12-28",
        // dictType: undefined,
      },

      lineChartData: lineChartData.newVisitis,
    };
  },
  created() {
    console.log(1111111111);
    var timeGap = JSON.parse(localStorage.getItem("objGap"));
    if (timeGap) {
      console.log(JSON.stringify(timeGap));
      //   Object.assign(this.$data.valueTime, new Date(timeGap.valueTime));
      //   // this.groupType = timeGap.dateType;
      // this.$set(this.valueTime, timeGap.valueTime);
      this.valueTime = new Date(timeGap.startTime);
      //   this.$forceUpdate;
      //   // val = new Date(timeGap.startTime);
      //   // this.$emit("input", val);
      //   // this.timeObj.startTime = new Date(timeGap.startTime),
      //   //   this.timeObj.endTime = new Date(timeGap.endTime),
    }
    var storeForm = JSON.parse(localStorage.getItem("skuadminParams"));
    if (storeForm) {
      // this.$set(this.queryParams, storeForm)
      this.queryParams = storeForm;
      this.getselectItemDateList(this.queryParams);
    }
    // var otherVal = JSON.parse(localStorage.getItem("skuadmin"));
    // if (otherVal) {
    //   this.$set(this.queryParams, "pageNum", otherVal.currentPage);
    //   this.$set(this.queryParams, "pageSize", otherVal.pageSize);

    //   // this.Nowscroll = otherVal.scrollTop
    //   // this.scrollLeft = otherVal.scrollLeft
    // }
    //面料名称
    this.getmianliao();
    // this.handleChangeTime()
    /** 查询品牌渠道店铺关系列表 */
    this.getdataSourceList();
    // this.openLoading();
  },
  mounted() {
    var _this = this;
    this.resizeTable();
    window.onresize = function () {
      _this.resizeTable();
    };
    window.addEventListener("scroll", this.startScrollTimer);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.startScrollTimer);
  },
  //记得清空  如果在keepalive中 则使用activated  deactivated
  destroyed() {
    window.onresize = null;
  },
  watch: {
    timeGapRate: {
      handler: function (newnew, oldold) {
        console.log(JSON.stringify(newnew));
        // this.list = [];
        this.handleChange();
      },
      deep: true,
      immediate: true,
    },
    timeGapTime: {
      handler: function (newnew, oldold) {
        console.log(JSON.stringify(newnew));
        // this.list = [];
        this.handleChange();
      },
      deep: true,
      immediate: true,
    },
    timeGap: {
      handler: function (newnew, oldold) {
        console.log(JSON.stringify(newnew));
        // this.list = [];
        this.handleChange();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    //状态改变
    changeTheme(val) {},
    //面料名称
    getmianliao() {
      this.loading = true;
      selectFabricNameList().then((response) => {
        // console.log(JSON.stringify(response));
        this.mianliao = response;
        // console.log(JSON.stringify(this.FabricList));
        // this.total = response.total;
        this.loading = false;
      });
    },
    //跳转
    gotoSku(row) {
      let objGap = {
        value: this.value,
        // salesGrade: this.value.join(","),
        timeObj: this.timeObj,
        ...this.queryParams,
        itemOne: row.itemGrade,
        valueTime: this.valueTime,
      };
      console.log(JSON.stringify(objGap));
      localStorage.setItem("objGap", JSON.stringify(objGap));
      // return;
      this.$router.push({ path: "/sku/manage" });
    },
    //锚点
    scrollToSection(index) {
      const target = this.sections[index];
      // console.log(JSON.stringify(index));
      //     return
      this.active = index;
      if (target) {
        this.$nextTick(() => {
          target.scrollIntoView({ behavior: "smooth" });
          this.activeSection = target;
        });
      }
    },
    //锚点
    startScrollTimer() {
      this.scrollTimer = setInterval(() => {
        const currentSection = document.querySelector("section[data-active]");
        if (currentSection !== this.activeSection) {
          this.activeSection = currentSection;
        } else {
          clearInterval(this.scrollTimer);
        }
      }, 100); // 每100毫秒检查一次滚动位置是否变化
    },
    //锚点高亮
    isActiveSection(sectionId) {
      // 检查当前导航项是否处于高亮状态
      return this.active === sectionId;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // this.getList();
      console.log(JSON.stringify(this.queryParams));
      if (!this.queryParams.itemType) {
        this.$modal.msgError("请选择产品视角");
        return;
      }
      this.handleChange();
    },
    /** 重置按钮操作 */
    resetQuery() {
      localStorage.removeItem("skuadminobj");
      localStorage.removeItem("skuadmin");
      localStorage.removeItem("skuadminParams");
      localStorage.removeItem("objGap");
      this.queryParams = {};

      this.resetForm("queryForm");
      this.ItemDateList = [];
      this.total = 0;
      this.echartData.rows = [];
      this.queryParams.salesGrade = ["VFU"];
      this.queryParams.itemType = "item";

      this.valueTime = new Date(new Date().setDate(new Date().getDate() - 1));
      // this.handleQuery();
    },
    //时间控件
    changDay(val) {
      this.dayActive = val;
      this.timeGap.startTime = val[0];
      this.timeGap.endTime = val[1];
    },
    getDateArr(value) {
      this.timeGap.startTime = value[0];
      this.timeGap.endTime = value[1];
      console.log(JSON.stringify(this.dayActive));
      console.log(JSON.stringify(this.timeGap));

      this.queryParams.newProStartTime = this.timeGap.startTime;
      this.queryParams.newProEndTime = this.timeGap.endTime;
    },
    //销售时间段
    changDayTime(val) {
      this.dayActiveTime = val;
      this.timeGapTime.startTime = val[0];
      this.timeGapTime.endTime = val[1];
    },
    getDateArrTime(value) {
      this.timeGapTime.startTime = value[0];
      this.timeGapTime.endTime = value[1];
      // console.log(JSON.stringify(this.dayActive));
      // console.log(JSON.stringify(this.timeGap));

      this.queryParams.startSaleDays = this.timeGapTime.startTime;
      this.queryParams.endSaleDays = this.timeGapTime.endTime;
      // this.handleChange();
    },
    //售罄时间段
    changDayRate(val) {
      this.dayActiveRate = val;
      this.timeGapRate.startSellOutDate = val[0];
      this.timeGapRate.endSellOutDate = val[1];
    },
    getDateArrRate(value) {
      this.timeGapRate.startSellOutDate = value[0];
      this.timeGapRate.endSellOutDate = value[1];
      this.queryParams.startSellOutDate = value[0];
      this.queryParams.endSellOutDate = value[1];
      console.log(JSON.stringify(this.timeGapRate));
      // this.changePage();
    },
    //选完时间后发请求
    handleChangeTime(timeObj) {
      // console.log(type)
      // console.log(timeObj)
      // TODO
      this.timeObj = timeObj;
      console.log(JSON.stringify(this.timeObj));
      // let obj = {
      //   salesGrade: this.value.join(","),
      //   ...timeObj,
      //   item: this.productView,
      //   ...this.queryParams,
      // };
      // var skuadminParams = JSON.parse(localStorage.getItem("skuadminParams"));
      // if (skuadminParams) {
      //   this.getselectItemDateList(skuadminParams);
      //   localStorage.setItem("skuadminParams", JSON.stringify(skuadminParams));
      // } else {
      if (!this.queryParams.itemType) {
        this.$modal.msgError("请选择产品视角");
        return;
      }
      this.queryParams.pageNum = 1;
      // (this.queryParams.salesGrade = this.value.join(",")),
      this.queryParams.startTime = this.timeObj.startTime;
      this.queryParams.endTime = this.timeObj.endTime;
      this.queryParams.dateType = this.timeObj.dateType;
      // this.queryParams.item = this.productView;
      if (!this.queryParams.endTime) {
        return;
      } else {
        this.getselectItemDateList(this.queryParams);
      }
      // }
      // console.log(JSON.stringify(obj));
      // (this.queryParams.salesGrade = this.value.join(",")),
      //   (this.queryParams.startTime = this.timeObj.startTime);
      // this.queryParams.endTime = this.timeObj.endTime;
      // this.queryParams.dateType = this.timeObj.dateType;
      // this.queryParams.item = this.productView;
      // if (!this.queryParams.endTime) {
      //   return;
      // }

      // // else if (obj.dateType == "date" || obj.dateType == "daterange") {
      // // console.log("库存接口");

      // //曲线
      // //   this.getechartChannelData(obj);
      // //   //销售指标
      // //   this.getselectSaleSingle(obj);
      // //   //渠道SaleTop
      // //   this.getchannelSaleTop(obj);
      // //   //店铺SaleTop
      // //   this.getshopSaleTop(obj);
      // //   //sku曲线
      // //   this.getechartSkuData(obj);
      // //   //sku指标
      // //   this.getselectSkuSingle(obj);
      // // }
      // else {
      //   var skuadminParams = JSON.parse(localStorage.getItem("skuadminParams"));
      //   if (skuadminParams) {
      //     this.getselectItemDateList(skuadminParams);
      //   } else {
      //     this.getselectItemDateList(this.queryParams);
      //   }
      // }
      let param = {
        dataSource: this.value,
        startTime: this.dateFormat(timeObj.startTime),
        endTime: this.dateFormat(timeObj.endTime),
        dataType: this.groupType,
      };
      console.log(JSON.stringify(param));
      if (!param.endTime) {
        return;
      } else {
        // this.getechartChannelData(obj)
        //客件数
        // this.getnumberOfItem(param);
        // //地区Top20
        // this.getTopSal(param);
      }
    },
    tableEdit(row, column, cell, event) {
      let vmEl = this.$refs["table"].$el;
      console.log(vmEl);
      const scrollParent = vmEl.querySelector(".el-table__body-wrapper");
      // this.Nowscroll = scrollParent.scrollTop
      // console.log(this.queryParams);
      console.log(scrollParent.scrollLeft);
      // return
      // return
      var otherVal = {
        // currentPage: this.queryParams.pageNum,
        // pageSize: this.queryParams.pageSize,
        scrollTop: scrollParent.scrollTop,
        scrollLeft: scrollParent.scrollLeft,

        // "productNo": this.queryParams.productNo,
        // "colorProperty": this.queryParams.colorProperty,
        // "manufacturerCode": this.queryParams.manufacturerCode,
        // "procureRemark": this.queryParams.procureRemark
      };
      let obj = {
        // salesGrade: this.value.join(","),
        salesGrade: this.queryParams.salesGrade.join(","),
        ...this.timeObj,
        item: this.queryParams.itemType,

        itemOne: row.itemGrade,
        startSaleDays: this.timeGapTime.startTime,
        endSaleDays: this.timeGapTime.endTime,
      };
      // // console.log(JSON.stringify());
      // localStorage.setItem("skuadminobj", JSON.stringify(obj));
      localStorage.setItem("skuadmin", JSON.stringify(otherVal));
      localStorage.setItem("skuadminParams", JSON.stringify(this.queryParams));

      // console.log(JSON.stringify(column.property));
      // let obj = {
      //   salesGrade: this.value.join(","),
      //   ...this.timeObj,
      //   item: this.productView,
      //   itemOne: row.itemGrade,
      // };
      selectItemStatistics(obj).then((response) => {
        var row = [];
        response.forEach((item) => {
          // console.log(1111111111111111);
          // console.log(JSON.stringify(item[column.property]));
          // console.log(1111111111111111);
          row.push({
            支付日期: item.payDateUnit,
            销售金额: item.salesAmount,
            退款金额: item.returnAmount,
            净销售额: item.netSalesAmount,
            总销售件数: item.totalSalesNumber,
            净销售件数: item.netSalesNumber,
            发货前退货件数: item.returnBeforeShipmentNumber,
            发货后退货件数: item.returnAfterShipmentNumber,
            总退货件数: item.totalReturnNumber,
            综合退货率: item.comprehensiveReturnRate,
            毛利额: item.grossProfit,
            毛利率: item.grossProfitRate,
            净销售额: item.netSalesAmount,
            期末库存: item.endingInventory,
            售罄率: item.exhaustionRate,
            SD单件数: item.sdNumber,
            MJX单件数: item.mjxNumber,
          });
        });

        this.echartData.rows = row;
        if (!column) {
          // column.property = column[3].property;
          return;
        }

        let type = this.get_chinese_name_by_en_name(column.property);
        if (this.highlighted.includes(type)) {
          return;
        }
        // 移除旧的高亮元素
        this.highlighted.shift();
        // // 添加新的高亮元素
        this.highlighted.push(type);

        console.log(JSON.stringify(this.highlighted));
        var arr = ["支付日期"];
        let array = arr.concat(this.highlighted);
        // let temp = arr.push(type)
        // console.log(JSON.stringify(temp));
        // var array = ["支付日期", "退款金额", "净销售额", "毛利率"];
        var rateItem;

        // 遍历数组，找到包含'率'字的元素
        for (var i = 0; i < array.length; i++) {
          if (array[i].includes("率")) {
            rateItem = array[i];
            break;
          }
        }

        // 如果找到了包含'率'字的元素，将其移到数组最后
        if (rateItem) {
          var index = array.indexOf(rateItem);
          if (index !== array.length - 1) {
            array.splice(index, 1);
            array.push(rateItem);
          }
        }

        console.log(array);
        this.echartData.columns = array;
      });
    },
    get_chinese_name_by_en_name(en_name) {
      let res = "销售金额";

      let relation = {
        salesAmount: "销售金额",
        returnAmount: "退款金额",
        // "factory_order":

        netSalesAmount: "净销售额",
        totalSalesNumber: "总销售件数",
        netSalesNumber: "净销售件数",
        returnBeforeShipmentNumber: "发货前退货件数",
        returnAfterShipmentNumber: "发货后退货件数",
        totalReturnNumber: "总退货件数",
        comprehensiveReturnRate: "综合退货率",
        grossProfit: "毛利额",
        grossProfitRate: "毛利率",
        endingInventory: "期末库存",
        exhaustionRate: "售罄率",
        sdNumber: "SD单件数",
        mjxNumber: "MJX单件数",
      };

      if (relation.hasOwnProperty(en_name)) {
        res = relation[en_name];
      }

      return res;
    },
    //视图角度
    changeView(val) {
      if (!this.queryParams.endTime) {
        this.$modal.msgError("请选择时间");
        return;
      }
      // let obj = {
      //   salesGrade: this.value.join(","),
      //   ...this.timeObj,
      //   item: val,
      //   dataType: this.groupType,
      //   ...this.queryParams,
      // };
      this.openLoading();
      selectItemDateList(this.queryParams).then((response) => {
        this.$modal.closeLoading();
        this.ItemDateList = response.rows;
        this.total = response.total;
        this.tableEdit(response.rows[0]);

        // console.log(JSON.stringify(this.ItemDateList));
      });
    },
    //页面加载数据
    getselectItemDateList(obj) {
      var otherVal = JSON.parse(localStorage.getItem("skuadmin"));
      if (otherVal) {
        // this.$set(this.queryParams, "pageNum", otherVal.currentPage);
        // this.$set(this.queryParams, "pageSize", otherVal.pageSize);

        this.Nowscroll = otherVal.scrollTop;
        this.scrollLeft = otherVal.scrollLeft;
      }
      this.loading = true;
      console.log(JSON.stringify(obj));
      this.openLoading();
      selectItemDateList(obj).then((response) => {
        this.$modal.closeLoading();
        this.ItemDateList = response.rows;
        this.total = response.total;

        if (response.rows.length > 0) {
          this.tableEdit(response.rows[0]);
        }
        this.loading = false;
        setTimeout(() => {
          this.$refs["table"].bodyWrapper.scrollTop = this.Nowscroll;
          this.$refs["table"].$el.querySelector(
            ".el-table__body-wrapper"
          ).scrollTop = this.Nowscroll;
          console.log("this.Nowscroll", this.Nowscroll);
        }, 10);

        setTimeout((_) => {
          this.ItemDateList.forEach((e) => {
            let myChart = echarts.init(this.$refs["echarts" + e.itemGrade]);
            myChart.setOption({
              grid: {
                left: "0",
                top: "0",
                right: "0",
                bottom: "0",
                containLabel: false,
              },
              xAxis: {
                type: "category",
                //不显示x轴线
                show: false,
              },
              yAxis: {
                type: "value",
                show: false,
              },
              series: [
                {
                  // data: e.tendencyChart.data.slice(-12), 取倒数12个
                  data: e.tendencyChart.data,
                  //单独修改当前线条的颜色
                  lineStyle: {
                    normal: {
                      // color: "#f00",
                      width: 1,
                    },
                  },
                  type: "line",
                  smooth: true,
                  symbol: "none",
                  areaStyle: {},
                },
              ],
            });
            window.addEventListener("resize", () => {
              myChart.resize();
            });
          });
        }, 1000);
        // console.log(JSON.stringify(this.ItemDateList));
      });
    },

    //指标点击回传
    handleSetLineSkuData(type) {
      // console.log(JSON.stringify(type));
      if (this.highlightedSku.includes(type)) {
        return;
      }
      // 移除旧的高亮元素
      this.highlightedSku.shift();
      // // 添加新的高亮元素
      this.highlightedSku.push(type);

      console.log(JSON.stringify(this.highlightedSku));
      var arr = ["支付日期"];
      let temp = arr.concat(this.highlightedSku);
      // let temp = arr.push(type)
      console.log(JSON.stringify(temp));
      this.echartDataSku.columns = temp;
      // const obj = {
      //   newVisitis: [130, 140, 141, 142, 145, 150, 160],
      //   messages: [120, 82, 91, 154, 162, 140, 145],
      //   purchases: [80, 100, 121, 104, 105, 90, 100],
      //   shoppings: [180, 160, 151, 106, 145, 150, 130]
      // }
      // this.echartData.columns = ['日期', '访问用户']
      // this.echartData.rows = [
      //   { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
      //   { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
      //   { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
      //   { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
      //   { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
      //   { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
      // ]
      // this.lineChartData = lineChartData[type]
      // this.lineChartData = obj
    },
    //指标点击回传
    handleSetLineChartData(type) {
      // console.log(JSON.stringify(type));
      if (this.highlighted.includes(type)) {
        return;
      }
      // 移除旧的高亮元素
      this.highlighted.shift();
      // // 添加新的高亮元素
      this.highlighted.push(type);

      console.log(JSON.stringify(this.highlighted));
      var arr = ["支付日期"];
      let temp = arr.concat(this.highlighted);
      // let temp = arr.push(type)
      console.log(JSON.stringify(temp));
      this.echartData.columns = temp;
      // const obj = {
      //   newVisitis: [130, 140, 141, 142, 145, 150, 160],
      //   messages: [120, 82, 91, 154, 162, 140, 145],
      //   purchases: [80, 100, 121, 104, 105, 90, 100],
      //   shoppings: [180, 160, 151, 106, 145, 150, 130]
      // }
      // this.echartData.columns = ['日期', '访问用户']
      // this.echartData.rows = [
      //   { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
      //   { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
      //   { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
      //   { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
      //   { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
      //   { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
      // ]
      // this.lineChartData = lineChartData[type]
      // this.lineChartData = obj
    },
    //店铺控件
    handleChange(val) {
      console.log(JSON.stringify(val));

      // var lastElement = val.pop();
      // this.shopName = lastElement

      // console.log(this.dayActive);
      // let obj = {
      //   salesGrade: this.value.join(","),
      //   ...this.timeObj,
      //   item: this.productView,
      //   ...this.queryParams,
      // };
      // console.log(JSON.stringify(obj));
      // var skuadminParams = JSON.parse(localStorage.getItem("skuadminParams"));
      // if (skuadminParams) {
      //   this.getselectItemDateList(skuadminParams);
      //   localStorage.setItem("skuadminParams", JSON.stringify(skuadminParams));
      // } else {
      // (this.queryParams.salesGrade = this.value.join(",")),
      this.queryParams.startTime = this.timeObj.startTime;
      this.queryParams.endTime = this.timeObj.endTime;
      this.queryParams.dateType = this.timeObj.dateType;
      // this.queryParams.item = this.productView;
      if (!this.queryParams.endTime) {
        return;
      } else {
        this.getselectItemDateList(this.queryParams);
      }
      // }
      let param = {
        dataSource: this.value,
        startTime: this.dateFormat(this.timeObj.startTime),
        endTime: this.dateFormat(this.timeObj.endTime),
        dataType: this.groupType,
      };
      console.log(JSON.stringify(param));
      if (!param.endTime) {
        return;
      } else {
        // this.getechartChannelData(obj)
        // this.getnumberOfItem(param);
        // this.getTopSal(param);
      }
    },

    // 时间格式转换
    dateFormat(date) {
      date = new Date(date);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate() + "";
      return Y + M + D;
    },
    /** 查询品牌渠道店铺关系列表 */
    getdataSourceList() {
      listAll().then((response) => {
        // response.rows = [
        //     { channel: '抖音', shopName: 'VFU抖一抖店-抖音', brand: 'VFU' },
        //     { channel: '抖音', shopName: 'VFU-抖音小店', brand: 'VFU' },
        //     { channel: '头条放心购', shopName: 'VFU-头条放心购', brand: 'VFU' },
        //     { channel: '拼多多', shopName: 'VFU-拼多多', brand: 'VFU' },
        //     { channel: '微信', shopName: 'VFU-微店', brand: 'VFU' },
        //     { channel: '微信', shopName: 'VFU-微信商城', brand: 'VFU' },
        //     { channel: '小红书', shopName: 'VFU-小红书', brand: 'VFU' },
        //     { channel: '严选', shopName: 'VFU-严寻合作', brand: 'VFU' },
        //     { channel: '天猫', shopName: 'VFU运动旗舰店', brand: 'VFU' },
        //     { channel: '京东', shopName: 'VFU运动旗舰店-京东', brand: 'VFU' }
        // ];
        // const result = [];

        let result = this.transformData(response);
        this.cascadeList = result;
      });
    },
    //店铺渠道品牌转换

    transformData(data) {
      let result = [];

      data.forEach((item) => {
        let brand = item.brand;
        let channel = item.channel;
        let shopName = item.shopName;

        // 如果brand在结果数组中不存在，则创建一个新的数组
        let brandIndex = result.findIndex(
          (brandObj) => brandObj.label === brand
        );
        if (brandIndex === -1) {
          result.push({
            label: brand,
            value: brand,
            children: [],
          });
          brandIndex = result.length - 1;
        }

        // 如果channel在当前brand的children数组中不存在，则创建一个新的数组
        let channelIndex = result[brandIndex].children.findIndex(
          (channelObj) => channelObj.label === channel
        );
        if (channelIndex === -1) {
          result[brandIndex].children.push({
            label: channel,
            value: channel,
            children: [],
          });
          channelIndex = result[brandIndex].children.length - 1;
        }

        // 如果shopName在当前channel的children数组中不存在，则创建一个新的数组
        let shopIndex = result[brandIndex].children[
          channelIndex
        ].children.findIndex((shopObj) => shopObj.label === shopName);
        if (shopIndex === -1) {
          result[brandIndex].children[channelIndex].children.push({
            label: shopName,
            value: shopName,
            // children: []
          });
        }
      });

      return result;
    },

    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载商品排行数据，请稍候！");
    },
    // table自动高度
    returnTableHeight(ref, bottomOffset) {
      let height = null;
      height =
        window.innerHeight - ref.getBoundingClientRect().top - bottomOffset;
      return height;
    },

    resizeTable() {
      this.$nextTick(() => {
        this.tableHeight = this.returnTableHeight(this.$refs.tableDom, 100);
      }, 0);
    },
    /** 导出按钮操作 */
    handleExport() {
      if (this.ItemDateList.length <= 0) {
        this.$modal.msgError("暂无数据可导出");

        return;
      }
      this.download(
        "product/BiAnalysis/export",
        {
          ...this.queryParams,
        },
        `商品排行_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
/* 移除默认的列表样式 */
ul {
  margin-top: 0.4%;
  list-style-type: none;
  /* 设置弹性布局，使列表项横向排列 */
  display: flex;
  /* 添加一些内边距和背景颜色 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置边框和圆角 */
  // border: 1px solid #ddd;
  border-radius: 5px;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

/* 设置列表项样式 */
li {
  /* 添加一些内边距和右边距 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置链接文本样式 */
  font-size: 15px;
  color: #bbb;
  text-decoration: none;
}

li.active a {
  // color: #f00;
  /* 高亮颜色 */
  color: #fff;
  background-color: #40c9c6;
}

// section {
//   margin-top: 60px;
// }

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
<style>
.el-scrollbar__wrap {
  /* overflow-x: hidden; */
  /* overflow-y: hidden; */
}
</style>
  /** 销售金额 */
    private Double salesAmount;

    /** 退款金额 */
    private Double returnAmount;

    /** 净销售额 */
    private Double netSalesAmount;

 /** 总销售件数 */
    private Integer totalSalesNumber;

    /** 净销售件数 */
    private Integer netSalesNumber;

    /** 发货前退货件数 */
    private Integer returnBeforeShipmentNumber;

    /** 发货后退货件数 */
    private Integer returnAfterShipmentNumber;

    /** 总退货件数 */
    private Integer totalReturnNumber;

    /** 综合退货率 */
    private Double comprehensiveReturnRate;

    /** 毛利额 */
    private Double grossProfit;

    /** 毛利率 */
    private Double grossProfitRate;

    /** 期末库存 */
    private Integer endingInventory;

    /** 告罄率 */
    private Double exhaustionRate;

    /** SD单件数 */
    private Integer sdNumber;

    /** MJX单件数 */
    private Integer mjxNumber;
